<div class="info-list">
    <!-- https://material.angular.io/components/list/examples -->
    
    <div mat-subheader><b>Fubuki {{serverType | titlecase}}</b></div>
    
    <mat-list>
      <div mat-subheader><b>Groups</b></div>
      <mat-divider></mat-divider>

      <mat-card *ngFor="let groupInfo of this.groupList | async">
        <a [routerLink]="['/group', groupInfo[groupNameFieldName]]" [title]="groupInfo[groupNameFieldName]">
          <mat-list-item class="groupInfo">
            <mat-divider></mat-divider>
            <mat-icon matListItemIcon>lan</mat-icon>
            <div matListItemTitle>
              {{groupInfo[groupNameFieldName]}}
            </div>
            <div matListItemLine>
              {{groupInfo.server_addr}}{{groupInfo.listen_addr}}
            </div>
          </mat-list-item>
        </a>
      </mat-card>
      
    </mat-list>

</div>